<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/userStore';

const router = useRouter();
const userStore = useUserStore();

// 获取当前用户角色
const currentRole = computed(() => userStore.role);
const currentUser = computed(() => userStore.getCurrentUser);

// 根据角色获取功能卡片
const getFunctionCards = computed(() => {
  switch (currentRole.value) {
    case 'ADMIN':
      return [
        {
          title: '值班安排',
          description: '管理初访员和咨询师的值班时间',
          icon: 'mdi-calendar-clock-outline',
          route: '/duty-schedule',
          color: 'purple'
        },
        {
          title: '用户信息管理',
          description: '查看和管理心理咨询系统用户',
          icon: 'mdi-account-group-outline',
          route: '/psychological-users',
          color: 'warning'
        },
        {
          title: '咨询师管理',
          description: '管理咨询师信息和状态',
          icon: 'mdi-account-tie-outline',
          route: '/consultant-management',
          color: 'secondary'
        },
        {
          title: '预约审核',
          description: '审核学生预约申请，处理紧急预约',
          icon: 'mdi-clipboard-check-outline',
          route: '/appointment-review',
          color: 'orange'
        }
      ];
    case 'STUDENT':
      return [
        {
          title: '初访预约申请',
          description: '申请初次心理咨询预约',
          icon: 'mdi-account-plus-outline',
          route: '/initial-appointment',
          color: 'primary'
        },
        {
          title: '我的预约查询',
          description: '查看和管理我的预约状态',
          icon: 'mdi-calendar-check-outline',
          route: '/appointment-management',
          color: 'success'
        }
      ];
    case 'INITIAL_VISITOR':
      return [
        {
          title: '初访预约管理',
          description: '管理已批准的初访预约',
          icon: 'mdi-clipboard-list-outline',
          route: '/initial-visitor-appointments',
          color: 'primary'
        },
        {
          title: '初访记录录入',
          description: '录入初访结果和评估',
          icon: 'mdi-file-document-outline',
          route: '/initial-visitor-records',
          color: 'success'
        }
      ];
    case 'ASSISTANT':
      return [
        {
          title: '咨询预约审核',
          description: '审核初访通过的学生咨询申请',
          icon: 'mdi-clipboard-check-outline',
          route: '/assistant/appointment-review',
          color: 'primary'
        },
        {
          title: '咨询安排记录',
          description: '查看咨询安排和分配记录',
          icon: 'mdi-calendar-check-outline',
          route: '/assistant/arrangement-records',
          color: 'success'
        },
        {
          title: '预约管理',
          description: '管理所有预约状态',
          icon: 'mdi-calendar-check-outline',
          route: '/appointment-management',
          color: 'orange'
        }
      ];
    case 'CONSULTANT':
      return [
        {
          title: '我的学生管理',
          description: '管理分配给您的学生咨询',
          icon: 'mdi-account-group-outline',
          route: '/consultant/student-management',
          color: 'primary'
        }
      ];
    default:
      return [];
  }
});

// 根据角色获取统计信息
const getStatistics = computed(() => {
  switch (currentRole.value) {
    case 'ADMIN':
      return [
        {
          title: '总用户数',
          value: '156',
          icon: 'mdi-account-group',
          color: 'primary',
          trend: '+12%'
        },
        {
          title: '今日预约',
          value: '23',
          icon: 'mdi-calendar-check',
          color: 'success',
          trend: '+5%'
        },
        {
          title: '待审核',
          value: '8',
          icon: 'mdi-clipboard-clock',
          color: 'warning',
          trend: '-2%'
        },
        {
          title: '咨询师',
          value: '12',
          icon: 'mdi-account-tie',
          color: 'info',
          trend: '+1%'
        }
      ];
    case 'STUDENT':
      return [
        {
          title: '我的预约',
          value: '2',
          icon: 'mdi-calendar-check',
          color: 'primary',
          trend: '进行中'
        },
        {
          title: '咨询次数',
          value: '5',
          icon: 'mdi-chat-processing',
          color: 'success',
          trend: '已完成'
        }
      ];
    case 'INITIAL_VISITOR':
      return [
        {
          title: '待处理预约',
          value: '15',
          icon: 'mdi-clipboard-clock',
          color: 'warning',
          trend: '待录入'
        },
        {
          title: '今日初访',
          value: '8',
          icon: 'mdi-account-check',
          color: 'success',
          trend: '已完成'
        }
      ];
    case 'ASSISTANT':
      return [
        {
          title: '待审核申请',
          value: '12',
          icon: 'mdi-clipboard-clock',
          color: 'warning',
          trend: '待处理'
        },
        {
          title: '已安排咨询',
          value: '25',
          icon: 'mdi-calendar-check',
          color: 'success',
          trend: '本周'
        }
      ];
    case 'CONSULTANT':
      return [
        {
          title: '我的学生',
          value: '8',
          icon: 'mdi-account-group',
          color: 'primary',
          trend: '进行中'
        },
        {
          title: '今日咨询',
          value: '3',
          icon: 'mdi-chat-processing',
          color: 'success',
          trend: '已完成'
        }
      ];
    default:
      return [];
  }
});

// 根据角色获取欢迎信息
const getWelcomeMessage = computed(() => {
  const userName = currentUser.value.name || currentUser.value.username;
  switch (currentRole.value) {
    case 'ADMIN':
      return `欢迎回来，${userName}！您是系统管理员，可以管理所有功能和用户。`;
    case 'STUDENT':
      return `欢迎，${userName}！您可以申请心理咨询预约并查看进度。`;
    case 'INITIAL_VISITOR':
      return `欢迎，${userName}！您是初访员，负责处理学生的初访预约。`;
    case 'ASSISTANT':
      return `欢迎，${userName}！您是咨询助理，负责安排咨询师和审核申请。`;
    case 'CONSULTANT':
      return `欢迎，${userName}！您是咨询师，可以管理分配给您的学生。`;
    default:
      return `欢迎使用心理咨询管理系统！`;
  }
});

const navigateTo = (route: string) => {
  router.push(route);
};
</script>

<template>
  <div>
    <VRow>
      <VCol cols="12">
        <VCard>
          <VCardTitle class="text-h4 text-center py-6">
            🧠 心理咨询管理系统
          </VCardTitle>
          <VCardText class="text-center">
            <p class="text-h6 mb-4">{{ getWelcomeMessage }}</p>
            <p class="text-body-1 text-grey-darken-1">
              这是一个基于 Vue 3 + Vuetify 的现代化心理咨询管理平台
            </p>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>

    <VRow class="mt-4">
      <VCol 
        v-for="item in getFunctionCards" 
        :key="item.title"
        cols="12" 
        sm="6" 
        md="3"
      >
        <VCard 
          :color="item.color"
          variant="tonal"
          hover
          @click="navigateTo(item.route)"
          class="cursor-pointer"
          height="200"
        >
          <VCardText class="text-center d-flex flex-column align-center justify-center h-100">
            <VIcon 
              :icon="item.icon" 
              size="48" 
              class="mb-3"
            />
            <h3 class="text-h6 mb-2">{{ item.title }}</h3>
            <p class="text-body-2">{{ item.description }}</p>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>

    <VRow class="mt-4">
      <VCol cols="12">
        <VCard>
          <VCardTitle>系统状态</VCardTitle>
          <VCardText>
            <VRow>
              <VCol cols="12" md="4">
                <VAlert 
                  type="success" 
                  variant="tonal"
                  icon="mdi-check-circle"
                >
                  前端系统正常运行
                </VAlert>
              </VCol>
              <VCol cols="12" md="4">
                <VAlert 
                  type="info" 
                  variant="tonal"
                  icon="mdi-information"
                >
                  Vue 3 + Vuetify 框架
                </VAlert>
              </VCol>
              <VCol cols="12" md="4">
                <VAlert 
                  type="warning" 
                  variant="tonal"
                  icon="mdi-alert"
                >
                  请确保后端服务运行
                </VAlert>
              </VCol>
            </VRow>
          </VCardText>
        </VCard>
      </VCol>
    </VRow>
  </div>
</template>

<style scoped>
.cursor-pointer {
  cursor: pointer;
}
</style>
